<template>
	<div class="login">
		<div class="box">
			<h1>B站天眼</h1>
			<input type="text" placeholder="请输入您的账号"  class="ipt" v-model='name'>
			<input type="password" placeholder="请输入您的密码" class="ipt" v-model='password'>
			<button class="btn" @click='login'>登录</button>
			<msg class='msg ' :class="[isWarning?'warning':'succ']">{{msg}}</msg>
		</div>
	</div>
</template>
<script>
	import Msg from '@/pages/msg'
	import {login} from '@/api/ajax.js'
	export default {
		data(){
			return{
				name:'',
				password:'',
				msg:'',
				isWarning:true,
				isMsgShow:false,
			}
		},
		created(){
			this.$emit('navList',0)
		},
		components:{
			Msg
		},
		methods:{
			login(){
				const that = this;
				const nameStr = this.trim(this.name)
				const passwordStr = this.trim(this.password)
				login(nameStr,passwordStr,function(data){
					if(data){
						const _data = data.data
						if(data.data.code===0){
							that.isWarning = false
							that.isMsgShow = true
							const token = _data.token
							sessionStorage.setItem('token',token); // 存入一个值
							that.$router.push({
								path:'/index',
							})
						}else{
							that.isMsgShow = true
						}
						that.msg = _data.message
					}
				}) 
			},
			trim(str){
				return str.replace(/(^\s*)|(\s*$)/g, "");

			},
		}
	}
</script>
<style scoped>
	.login{
		width: 100%;
		height: 100%;
		background-color: #f5f7f9;
		background-color: rgba(19, 21, 25, 0.3);
		overflow: hidden;
	}
	.box{
		margin: 100px auto;
		width: 300px;
		height: 300px;
		border-radius: 5px;
	}
	h1{
		text-align: center;
		color: rgba(19, 21, 25, 0.3)
	}
	.ipt{
		background-color: transparent;
		border: 0;
		width: 100%;
		height: 30px;
		border-radius: 30px;
		border: 1px solid rgba(19, 21, 25, 0.3);
		outline: none;
		margin-bottom: 20px;
		text-indent: 10px;
		color: #ff6700;
	}
	.ipt:focus{
		border: 1px solid red;
	}
	.btn{
		width: 70px;
		height: 30px;
	    color: #fff;
	    border: 0;
	    outline: none;
	    border-radius: 5px;
	    background-color: #19be6b;
	}
	.msg{
		margin-top: 10px;
	}
	.msg.warning{
	    border: 1px solid #fbd9d0;
	    background-color: #fdece8;
	    opacity: .6;		
	}
	.msg.succ{
		border: 1px solid #d1f2e1;
	    background-color: #e8f9f0;
	}
</style>